import React, {Component} from 'react';
import {Space, Table, Button, Form, Input, message} from 'antd';
import {AllSchools, AllSubjects} from "@/services/DashApi";
import ServiceEnvs from "@/services/ServiceEnvs";
import {ServerMessages} from "@/services/ServerMessages";
import {ShowError} from "@/utils/format";

const SearchModule = (props) => {

  const {onFilterName} = props

  return (
    <Form
      name="basic"
      layout="inline"
      labelCol={{span: 8}}
      wrapperCol={{span: 16}}
      initialValues={{remember: true}}
      onFinish={(values) => {
        onFilterName(values.keyword)
      }}
      autoComplete="off"
    >
      <Space>
        <Form.Item
          name="keyword"
        >
          <Input style={{width: 163}} name="searchValue" placeholder="请输入关键字"/>
        </Form.Item>
        <Button
          type="primary"
          htmlType="submit"
        >
          搜索
        </Button>
        <Button
          type="default"
          onClick={() => {
            onFilterName("")
          }}
        >
          全部
        </Button>
      </Space>
    </Form>
  )
}

class SchoolLists extends Component {

  state = {
    columns: [
      {
        title: '学科',
        dataIndex: 'name',
        key: 'name',
        render: (text, a) => <Button
          type="link"
          onClick={() => {
            this.props.onSchoolChange(a.name + '-' + a.number)
            }
          }
          style={{fontSize: 18}}
        >{text}-{a.number}</Button>,
      },
      // {
      //   title: '学科',
      //   dataIndex: 'progress',
      //   key: 'progress',
      //   sorter: (a, b) => a.progress - b.progress,
      //   render: text => <span>{text}</span>,
      // },
    ],
    data: [],
    originDataSource: []
  }

  handleFilter = (keyword) => {
    if (!keyword) keyword = ""
    if (this.state.originDataSource.length === 0) {
      this.state.originDataSource = this.state.data
    }
    console.log(this.state.originDataSource.length)
    console.log(this.state.originDataSource)
    this.state.data = this.state.originDataSource.filter((current) => {
      return current.name.indexOf(keyword) !== -1 || current.number.indexOf(keyword) !== -1
    })
    this.setState({data: this.state.data})
  }

  componentDidMount() {
    // AllSchools().then(response => {
    //   console.log("@查询所有学校", response)
    //   const res = []
    //   for (let i = 0; i < response.univ.length; i++) {
    //     res[i] = {
    //       key: `${i + 1}`,
    //       name: response.univ[i].univ_name,
    //       number: response.univ[i].univ_code,
    //       progress: response.univ[i].level,
    //     }
    //   }
    //   this.setState({data: res})
    //   console.log("@res", res)
    // })

    AllSubjects().then(response => {
      console.log("@AllSubjects", response)
      const res = []
      for (let i = 0; i < response.data.length; i++) {
        res[i] = {
          key: `${i + 1}`,
          name: response.data[i].univ_name,
          number: response.data[i].discipline_name,
          progress: response.data[i].discipline_name,
        }
      }
      this.setState({data: res})
      console.log("@res", res)

      // 默认选中
      const {defaultValue} = this.props
      if (defaultValue && defaultValue !== '') {
        this.handleFilter(defaultValue)
        this.props.onSchoolChange(this.state.data[0].name + '-' + this.state.data[0].number)
      }

    }, () => {
      ShowError(ServerMessages.error_message)
    })
  }

  render() {
    console.log(this.props)
    return (
      <>
        <Space direction="vertical" size="middle" style={{display: 'flex'}}>
          <SearchModule onFilterName={this.handleFilter} />
          <Table<any>
            rowKey="key"
            size="small"
            columns={this.state.columns}
            dataSource={this.state.data}
            pagination={{
              // style: { marginBottom: 0 },
              pageSize: this.props.pageSize ? this.props.pageSize : 6,
              showSizeChanger: false,
              showQuickJumper: false
            }}
          />
        </Space>
      </>
    );
  }
}

export default SchoolLists;

// import { Space, Table, Button } from 'antd';
// import React, {useState} from 'react';
// import {AllSchools} from "@/services/DashApi";
// const columns = [
//   {
//     title: '序号',
//     dataIndex: 'number',
//     key: 'number',
//     align: 'center',
//     render: (text) => <b>{text}</b>,
//   },
//   {
//     title: '院校名称',
//     dataIndex: 'name',
//     key: 'name',
//     align: 'center',
//     render: text => <Button type="link">{text}</Button>,
//   },
//   {
//     title: '填报进度',
//     dataIndex: 'progress',
//     key: 'progress',
//     align: 'center',
//     sorter: (a, b) => a.progress - b.progress,
//     render: text => <span>{text + '%'}</span>,
//   },
// ];
// let data = [];
//
// // for (let i = 0; i < 107; i++) {
// //   data[i] = {
// //     key: `${i+1}`,
// //     name: i %2 === 0 ? '南昌大学' : '华东交通大学',
// //     number: i+1,
// //     progress: i+1,
// //   }
// // }
//
// AllSchools().then(response => {
//   console.log(response)
//   let res = []
//   for (let i = 0; i < response.univ.length; i++) {
//     res[i] = {
//       key: `${i+1}`,
//       name: response.univ.univ_name,
//       number: response.univ.univ_code,
//       progress: response.univ.univ_code,
//     }
//   }
// })
//
// const App = () => (
//   <Table<any>
//     rowKey={(record) => record.index}
//     size="small"
//     columns={columns}
//     dataSource={data}
//     pagination={{
//       // style: { marginBottom: 0 },
//       pageSize: 5,
//       showSizeChanger: false,
//       showQuickJumper: false
//     }}
//   />
// );
//
// export default App;
